<template>
  <div class="top">
    <content>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in obj.pics" :key="item.id">
          <img :src="item.pic" alt />
        </van-swipe-item>
      </van-swipe>
      <div>
        <div v-html="text"></div>
      </div>

      <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
        <!-- <div>{{item.id}}</div> -->
        <van-card
          :price="this.$route.query.pic"
          :title="this.$route.query.name"
          :thumb="this.$route.query.img"
        />
        <!-- <van-stepper v-model="value" /> -->
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="buy">确认添加</van-button>
      </van-popup>
    </content>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="fn" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="danger" text="立即购买" @click="showPopup" />
      <!-- <van-cell is-link >展示弹出层</van-cell> -->
    </van-goods-action>
  </div>
  <!-- <img :src="obj.pic" alt="" /> -->
</template>
<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";

Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);

Vue.use(Swipe);
Vue.use(SwipeItem);
import content from "../../components/center/center";
import "../../components/css/aa.css";
export default {
  data() {
    return {
      obj: [],
      text: "",
      show: false,
      cont: [],
      // value: 0,
    };
  },
  components: {
    content,
  },
  //   https://api.it120.cc/small4/shop/goods/detail
  mounted() {
    let id = this.$route.query.id;
    console.log(this.$route.query.id);
    this.$axios
      .get("https://api.it120.cc/small4/shop/goods/detail", {
        params: {
          id: id,
        },
      })
      .then((res) => {
        // console.log(res);
        this.obj = res.data.data;
        this.text = res.data.data.content;
        // this.cont = res.data.data.slice(0, 1);
      });
  },
  methods: {
    fn() {
      this.$router.push({
        path: "/cart",
        // query: {
        //   id: item.id,
        // },
      });
    },
    showPopup() {
      this.show = true;
    },

    // buto(item) {
    //    this.$store.commit("add",item)
    // },
    buy() {
      console.log(this.$route.query.id);
      // console.log(this.pic);

      this.$router.push({
        path: "/cart",
        query: {
          id: this.$route.query.id,
          pic: this.$route.query.pic,
           title: this.$route.query.name,
           img:this.$route.query.img
        },
      });
    },
  },
};
</script>
<style lang="scss">
.imgsrc {
  width: 100%;
  height: 9rem;
}
.top {
  margin-top: 10vh;
  overflow: hidden;
}
// .my-swipe .van-swipe-item {
//   color: #fff;
//   font-size: 20px;
//   line-height: 150px;
//   text-align: center;
//   background-color: #39a9ed;
// }
</style>